<template>
  <div class="business-manage">
    <el-card>
      <el-form ref="ruleForm" :model="ruleForm" :inline="true" label-width="100px" class="ruleForm">
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="QQ：" prop="qq">
          <el-input v-model="ruleForm.qq" />
        </el-form-item>
        <el-form-item label="邀请码：" prop="invitationCode">
          <el-input v-model="ruleForm.invitationCode" />
        </el-form-item>
        <el-form-item label="用户状态：" prop="userStatus">
          <el-select v-model="ruleForm.userStatus">
            <el-option label="正常" value="ENABLE" />
            <el-option label="禁用" value="DISABLE" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="isLoading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed
          label="商家ID"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.seller.user_id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="用户名"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.user.username }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="QQ"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.seller.qq }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="邀请码"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.user.invitation_code || '/' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="用户类型"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.user.user_type | getType }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="最后登陆时间"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.user.last_login_time }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="可用金额"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.seller.coin_available }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="冻结金额"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.seller.coin_freeze }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="会员有效期"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.seller.member_expiration_time || '/' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          width="300"
          prop="seller.remark"
          align="center"
        />
        <el-table-column
          label="状态"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.user.user_status | getMissionStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          width="250"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button v-if="scope.row.user.user_status === 'ENABLE'" type="text" size="small" @click="handleExamineClick(scope.row, scope.$index, 'DISABLE')">禁用</el-button>
            <el-button v-if="scope.row.user.user_status === 'DISABLE'" type="text" size="small" @click="handleExamineClick(scope.row, scope.$index, 'ENABLE')">启用</el-button>
            <el-button type="text" size="small" @click="handleVipClick(scope.row, scope.$index)">修改商家信息</el-button>
            <el-button type="text" size="small" @click="handleLogin(scope.row, scope.$index)">登录</el-button>
            <!-- <el-button type="text" size="small" @click="handleClick(scope.row)">店铺审核</el-button> -->

          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog
      title="修改商家信息"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="登陆密码：">
          <el-input v-model="form.password" type="text" placeholder="空表示不修改" />
        </el-form-item>
        <el-form-item label="会员有效期：">
          <el-date-picker
            v-model="form.memberExpirationTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd hh:mm:ss"
          />
        </el-form-item>
        <el-form-item label="QQ：">
          <el-input v-model="form.qq" type="text" placeholder="请输入QQ" />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { sellerSearch, sellerUpdate, sellerLogin } from '@/api/user'
export default {
  filters: {
    getMissionStatus(status) {
      let StringType = ''
      switch (status) {
        case 'ENABLE' :
          StringType = '正常'
          break
        case 'CANCELLED' :
          StringType = '已取消'
          break
      }
      return StringType
    },
    getType(status) {
      let StringType = ''
      switch (status) {
        case 'SELLER' :
          StringType = '商家'
          break
        case 'BUYER' :
          StringType = '买手'
          break
      }
      return StringType
    }
  },
  data() {
    return {
      ruleForm: {
        pageNumber: 1,
        userStatus: 'ENABLE' // ENABLE-正常状态，DISABLE-禁用状态
      },
      tableData: [],
      isLoading: false,
      total: 0,
      dialogVisible: false,
      currentRow: {},
      currentIndex: 0,
      form: {}
    }
  },
  mounted() {
    this.sellerSearch()
  },
  methods: {
    sellerSearch() {
      this.isLoading = true
      sellerSearch(this.ruleForm).then(res => {
        this.tableData = res.list
        this.isLoading = false
        this.total = res.totalRow
      }).catch(() => {
        this.isLoading = false
      })
    },
    onSubmit() {
      this.sellerSearch()
    },
    handleClick(row) {

    },
    handleLogin(row, index) {
      this.$confirm(`是否登录此商家?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sellerLogin({
          id: row.user.id
        }).then(res => {
          window.open(`http://94.191.97.93/seller/index.html#/businessCenter/dataCenter?token=${res.token}&username=${res.username}`, '_blank')
        })
      })
    },
    handleCurrentChange(page) {
      this.ruleForm.pageNumber = page
      this.sellerSearch()
    },
    handleExamineClick(row, index, type) {
      const { id, password } = row.user
      this.$confirm(`是否${type === 'ENABLE' ? '启用' : '禁用'}此商家?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sellerUpdate({
          id,
          password,
          userStatus: type
        }).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.tableData[index].user.user_status = type
        })
      })
    },
    handleVipClick(row, index) {
      this.dialogVisible = true
      this.currentRow = row
      this.currentIndex = index
    },
    submit() {
      this.dialogVisible = false
      const { id } = this.currentRow.user
      const { password, memberExpirationTime, qq, remark } = this.form
      const params = {}
      if (password) {
        params.password = password
      }
      if (qq) {
        params.qq = qq
      }
      if (remark) {
        params.remark = remark
      }
      if (memberExpirationTime) {
        params.memberExpirationTime = memberExpirationTime
      }
      params.id = id
      // console.log(this.memberExpirationTime)
      sellerUpdate(params).then(res => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.sellerSearch()
      })
    }
  }
}
</script>
<style lang="scss">
  .business-manage{
    .el-card{
      .ruleForm{
        .el-input{
          width: 200px;
        }
        .el-select{
          width: 200px;
        }
      }
    }
  }
</style>
